<template>
  <div class="container" ref="container">
    <!-- 导航 -->
    <el-header class="head" style="height: 75px">
      <div class="nav">
        <!-- logo+文本 -->
        <div class="left" style="font-size: 18px">
          <div class="block" style="display: flex">
            <el-image
              :src="src"
              style="
                width: 180px;
                height: 65px;
                margin-right: 25px;
                padding-top: 5px;
              "
            ></el-image>
          </div>
        </div>
        <!-- 中间部分 -->
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="rgb(0, 21, 41)"
          text-color="rgb(166, 173, 180)"
          active-text-color="#fff"
        >
          <!-- 试卷详情 -->
          <el-menu-item
            index="1"
            style="height: 75px; line-height: 75px; font-size: 30px"
            @click="goback"
            >试卷详情</el-menu-item
          >
        </el-menu>
        <!-- 头像+名称 -->
        <el-col
          :span="12"
          style="
            display: flex;
            width: 500px;
            padding-left: 200px;
            text-align: center;
          "
        >
          <div class="block" style="padding: 20px">
            <el-avatar :size="50" :src="circleUrl"></el-avatar>
          </div>
          <div class="sub-title" style="line-height: 75px; font-size: 20px">
            欣悦
          </div>
        </el-col>
      </div>
    </el-header>
    <!-- 考试试题 -->
    <div class="content-list">
      <!-- 左侧题目栏 -->
      <div class="cleft">
        <el-row class="tac">
          <el-col :span="12" style="width: 100%; height: 100%">
            <el-menu
              router
              default-active="1"
              class="el-menu-vertical-demo"
              :default-openeds="openeds"
              style="width: 100%; height: 100%"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-edit"></i>
                  <span>单选题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item v-for="(value, index) in radio" :key="index">
                    <i class="el-icon-view"></i>
                    <router-link
                      :to="{
                        name: 'radioitema',
                        query: {
                          rid: value.id,
                          rtopic: value.topic,
                          chooseA: value.selectA,
                          chooseB: value.selectB,
                          chooseC: value.selectC,
                          chooseD: value.selectD,
                          checked: value.checked,
                        },
                      }"
                      custom
                      v-slot="{ navigate }"
                    >
                      <span
                        @click="navigate"
                        @keypress.enter="navigate"
                        role="link"
                        >题目{{ index + 1 }}</span
                      >
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-edit-outline"></i>
                  <span>多选题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item v-for="(value, index) in checkbox" :key="index">
                    <i class="el-icon-view"></i>
                    <router-link
                      :to="{
                        name: 'checkboxa',
                        query: {
                          rid: value.id,
                          rtopic: value.topic,
                          chooseA: value.selectA,
                          chooseB: value.selectB,
                          chooseC: value.selectC,
                          chooseD: value.selectD,
                        },
                      }"
                      custom
                      v-slot="{ navigate }"
                    >
                      <span
                        @click="navigate"
                        @keypress.enter="navigate"
                        role="link"
                        >题目{{ index + 1 }}</span
                      >
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-document-checked"></i>
                  <span>判断题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item v-for="(value, index) in judge" :key="index">
                    <i class="el-icon-view"></i>
                    <router-link
                      :to="{
                        name: 'TFitema',
                        query: {
                          rid: value.id,
                          rtopic: value.topic,
                          chooseA: value.selectA,
                          chooseB: value.selectB,
                        },
                      }"
                      custom
                      v-slot="{ navigate }"
                    >
                      <span
                        @click="navigate"
                        @keypress.enter="navigate"
                        role="link"
                        >题目{{ index + 1 }}</span
                      >
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <!-- 右侧答题区 -->
      <div class="cright">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
  <script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      // 默认打开
      openeds: ["1"],
      src: require("../../assets/logolc.png"),
      circleUrl: require("../../assets/user.jpg"),
    };
  },

  methods: {
    goback() {
      this.$router.replace("/teacher/TeacherExamManage");
    },
  },
  computed: {
    ...mapState(["radio", "checkbox", "judge"]),
  },
};
</script>


<style scoped lang="less">
.container {
  height: 950px;
}
.content-list {
  width: 100%;
  height: 92%;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  .cleft {
    width: 15%;
    height: 98%;
    background-color: #fff;
  }
  .cright {
    width: 80%;
    height: 95%;
    background-color: #fff;
    margin: 30px;
    padding: 10px;
    padding-left: 30px;
    box-sizing: border-box;
  }
}
.el-header {
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(0, 21, 41);
  color: rgb(166, 173, 180);
  text-align: center;
  line-height: 60px;
  height: 75px;
}
.nav {
  width: 100%;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  .left {
    width: 400px;
    padding-left: 100px;
  }
}
.el-menu {
  height: 75px;
  line-height: 75px;
}
</style>